<template>
	<view class="container flex-wrap flex-direction-col" style="background-color: #fff;">
	
		
		<view style="margin-top:5px;">
			
			
			<view class='item'>
			  <view class='left'>家庭台账</view>
			</view>
			<navigator url="returnlist/returnlist" class='item'>
			  <view class='left'>残疾人台账</view>
			  <view class='right'>
			    <image src='../../static/right.png'></image>
			  </view>
			</navigator>
			<navigator url="returnlist/returnlist" class='item'>
			  <view class='left'>特困家庭台账</view>
			  <view class='right'>
			    <image src='../../static/right.png'></image>
			  </view>
			</navigator>
			<navigator url="returnlist/returnlist" class='item'>
			  <view class='left'>学生台账</view>
			  <view class='right'>
			    <image src='../../static/right.png'></image>
			  </view>
			</navigator>
			<navigator url="returnlist/returnlist" class='item'>
			  <view class='left'>慢病重病家庭台账</view>
			  <view class='right'>
			    <image src='../../static/right.png'></image>
			  </view>
			</navigator>
			<navigator url="returnlist/returnlist" class='item'>
			  <view class='left'>精神病人台账</view>
			  <view class='right'>
			    <image src='../../static/right.png'></image>
			  </view>
			</navigator>
			<navigator url="returnlist/returnlist" class='item'>
			  <view class='left'>困境儿童台账</view>
			  <view class='right'>
			    <image src='../../static/right.png'></image>
			  </view>
			</navigator>
			<view style="height:20px;background-color: #f1f1f1;"></view>
			<view>
				<view class='item'>
				  <view class='left'>就业台账</view>
				</view>
				<navigator url="returnlist/returnlist" class='item'>
				  <view class='left'>无劳动力台账</view>
				  <view class='right'>
				    <image src='../../static/right.png'></image>
				  </view>
				</navigator>
				<navigator url="returnlist/returnlist" class='item'>
				  <view class='left'>就业台账</view>
				  <view class='right'>
				    <image src='../../static/right.png'></image>
				  </view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hidden: false,
				curIndex: 0,  //主类别数组被点击的index
				curSubIndex: 0,  //子类别数组被点击的index
				curSubCategory: 0,
				categories: [],
				dishes: [],
				clientHeight: 0
			}
		},
		onLoad(options) {
			let that = this
			uni.getSystemInfo({
				success: function (res) {
					that.clientHeight= res.windowHeight - 112
				}
			});
			this.fetchCategory()
		},
		onShow() {
			//this.selectCategory(this.$common.categoryIndex)
		},
		methods: {
			
			addCart: function(unit, id){
				let userid = uni.getStorageSync('userid')
				let data = {
					unit: unit,
					customerId: userid,
					productId: id,
					number: 1
				}
				this.$uniApi.addItemToCart(data)
			},
			
			selectCategory(i) { 
				this.curIndex = parseInt(i)
				this.$common.categoryIndex = this.curIndex
				this.selectSubCategory(0)
			},
			selectSubCategory(i){ 
				this.curSubIndex = parseInt(i)
				let sub = this.categories[this.curIndex].sub[this.curSubIndex]
				if (sub != null){
					this.curSubCategory = sub.id
					this.fetchDishes()
				}else{
					this.dishes = []
				}
				
			},
			  
			fetchCategory(){
				let that = this
				uni.request({
					url: that.$common.serverAddr +'/goods/category/query',
					data: { ws_id: '1' },
					method: 'POST',
					success: function(res) {
						that.categories = res.data.data
						that.selectCategory(that.$common.categoryIndex)
					},
					fail: function() {
						that.$uniApi.tipMsg('出错了')
					}
				}) 
			},
			
			fetchDishes(){
				let that = this
				uni.request({
					url: that.$common.serverAddr +'/goods/info/query',
					data: {category_id: that.curSubCategory, state: 1},
					method: 'POST',
					success: function(res) {
						that.dishes = res.data.data.list
					},
					fail: function() {
						that.$uniApi.tipMsg('获取商品信息失败')
					}
				}) 
			}
		}
	}
</script>

<style>
.top{
  height: 130px;
  background: url('https://cgt.weikedashi.net/cgt/my_top.jpg') no-repeat;
  background-size:100% 100%;
 }
 .top .img{
	margin-top: 15px;
	margin-left: 30px;
   width: 50px;
   height: 50px;
   overflow: hidden;
   border-radius: 50%;
 }
 
 .top .text{
	 margin-top: 15px;
	 margin-left: 12px;
   text-align: center;
   font-weight: bold;
   line-height: 50px;
   font-size: 14px;
   color: #FFFFFF;
 }
 .item{
   display: flex;
   line-height:30px;
   border-bottom: 10px solid #f1f1f1;
   padding: 0 16px;
 }
 .line-bottom{
   border-bottom :1px solid #dedede;
 }
 .item .left{
   flex: 1 0 50%;
   font-size: 14px;
   color: #333333;
 }
 
 .item .right{
   flex: 1 0 50%;
   display: flex;
   justify-content: flex-end;
   align-items: center;
 }
 
 .item image{
   width: 15px;
   height: 15px;
 }
 
 .item text{
   font-size: 12px;
   color: #999999;
   padding-right: 10px;
 }
 
 .icon{
   border-bottom: 10px solid #f1f1f1;
   display: flex;
   padding: 12px 0;
 }
 .icon image{
   display: block;
   width: 30px;
   height: 30px;
   margin: 0 auto;
   padding-top: 10px;
 }
 .icon text{
   display: block;
   text-align: center;
   width: 100%;
   font-size: 14px;
   color: #333;
   padding-top: 10px;
 }
 .icon navigator{
   flex: 1 0 25%;
 }
 .contact{
  height: 40px;
  opacity: 0;
  position: relative;
  top: -50px;
}
</style>
